<div class="navbar animated fadeIn fast delay-1s" xmlns:th="http://www.thymeleaf.org">
    <div class="container-fluid">
        <a class="navbar-brand text-brand" th:href="${setting.siteUrl}" th:text="${setting.siteLogo}"></a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item" th:if="${setting.isShowAlonePage('archives')}">
                    <a class="nav-link" th:href="${setting.siteUrl} + '/archives'" title="归档">
                        <svg class="icon" aria-hidden="true">
                            <use href="#icon-guidang"></use>
                        </svg>
                        <span class="nav-link-label">归档</span>
                    </a>
                </li>
                <li class="nav-item" th:if="${setting.isShowAlonePage('categories')}">
                    <a class="nav-link" th:href="${setting.siteUrl} + '/categories'" title="分类">
                        <svg class="icon" aria-hidden="true">
                            <use href="#icon-fenlei"></use>
                        </svg>
                        <span class="nav-link-label">分类</span>
                    </a>
                </li>
                <li class="nav-item" th:if="${setting.isShowAlonePage('tags')}">
                    <a class="nav-link" th:href="${setting.siteUrl} + '/tags'" title="标签">
                        <svg class="icon" aria-hidden="true">
                            <use href="#icon-tag"></use>
                        </svg>
                        <span class="nav-link-label">标签</span>
                    </a>
                </li>
                <li class="nav-item" th:each="page: ${showAlonePages}">
                    <a class="nav-link" th:href="${setting.siteUrl} + '/o/'+${page.slug}" th:title="${page.name}">
                        <span class="nav-link-label" th:text="${page.name}"></span>
                    </a>
                </li>
                <li th:if="${alonePages.size() > showAlonePages.size()}" class="nav-item nav-item-more" onmouseover="mouseover()" onmouseleave="mouseleave()">
                    <a class="nav-link" href="#">
                        <span class="nav-link-label">更多</span>
                        <svg class="icon icon-more" aria-hidden="true">
                            <use href="#icon-drop_down"></use>
                        </svg>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-item alone-page" th:each="page,pageStat : ${alonePages}" th:if="${pageStat.index > (showAlonePages.size() - 1)}">
                            <a th:href="${setting.siteUrl} + '/o/'+${page.slug}" th:text="${page.name}"></a>
                        </li>
                    </ul>
                </li>
            </ul>

            <ul class="navbar-nav side-toolbar-list">

                <li class="navbar-search-container">
                    <a id="navbar-search" class="search-form-input" href="javascript:showSearch();"
                       title="搜索...">
                        <i class="fa fa-search">
                        </i>
                    </a>
                    <form class="search-form" action="/search" role="search">
                        <input type="text" name="keyword" required="" placeholder="搜索..." class="search">
                    </form>
                </li>

                <li th:each="operatingButton : ${setting.operatingButtonList}">
                    <a th:href="${operatingButton.url}" th:title="${operatingButton.title}" target="_blank">
                        <i th:class="${operatingButton.style}"></i>
                    </a>
                </li>
                <li>
                    <a class="changeTheme" href="javascript:changeTheme();">
                        <i th:if="${darkTheme}" class="fas fa-sun"></i>
                        <i th:if="${!darkTheme}" class="fas fa-moon"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    function changeTheme() {
    }
    let menu = document.body.querySelector('.dropdown-menu')
    let icon = document.documentElement.querySelector('.icon-more')
    function mouseover(){
        menu.classList.add("show")
        icon.style.transform = 'rotate(0deg)'
    }
    function mouseleave(){
        menu.classList.remove("show")
        icon.style.transform = 'rotate(90deg)'
    }
    let searchLi = document.documentElement.querySelector('.navbar-search-container')
    function showSearch() {
        if(searchLi.style.width === '11rem'){
            searchLi.style.width = '2.75rem'
        } else {
            searchLi.style.width = '11rem'
        }
    }
</script>
